<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="text-center mb-4">电商信息管理系统aijp</h2>
      <form @submit.prevent="handleSubmit">
        <div class="mb-3">
          <label for="phone" class="form-label">手机号</label>
          <input 
            type="text" 
            class="form-control" 
            id="phone"
            v-model="phone"
            :class="{'is-invalid': phoneError}"
          >
          <div class="invalid-feedback" v-if="phoneError">
            请输入正确的手机号码
          </div>
        </div>
        
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input 
            type="password" 
            class="form-control" 
            id="password"
            v-model="password"
            :class="{'is-invalid': passwordError}"
          >
          <div class="invalid-feedback" v-if="passwordError">
            密码必须为6-10位数字和字母的组合
          </div>
        </div>

        <div class="mb-3">
          <label for="captcha" class="form-label">验证码</label>
          <div class="d-flex gap-2">
            <input 
              type="text" 
              class="form-control" 
              id="captcha"
              v-model="captcha"
              :class="{'is-invalid': captchaError}"
            >
            <button 
              type="button" 
              class="btn btn-outline-success" 
              @click="refreshCaptcha"
              style="min-width: 120px;"
            >{{ captchaText }}</button>
          </div>
          <div class="invalid-feedback" v-if="captchaError">
            请输入正确的验证码
          </div>
        </div>

        <button type="submit" class="btn btn-success w-100 mb-3">登录</button>
        
        <div class="text-center">
          <router-link to="/register" class="text-success">还没有账号？立即注册</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {
      phone: '',
      password: '',
      captcha: '',
      captchaText: '',
      phoneError: false,
      passwordError: false,
      captchaError: false,
      generatedCaptcha: ''
    }
  },
  mounted() {
    this.refreshCaptcha()
  },
  methods: {
    handleSubmit() {
      // 重置错误状态
      this.phoneError = false
      this.passwordError = false
      this.captchaError = false

      // 手机号验证
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.phone)) {
        this.phoneError = true
      }

      // 密码验证
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/
      if (!passwordRegex.test(this.password)) {
        this.passwordError = true
      }

      // 验证码验证
      if (this.captcha.toUpperCase() !== this.generatedCaptcha.toUpperCase()) {
        this.captchaError = true
      }

      if (!this.phoneError && !this.passwordError && !this.captchaError) {
        // TODO: 实现登录逻辑
        console.log('登录验证通过')
      }
    },
    refreshCaptcha() {
      const characters = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789'
      let result = ''
      for (let i = 0; i < 6; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length))
      }
      this.generatedCaptcha = result
      this.captchaText = result
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #198754;
  font-weight: bold;
}
</style>